<template name="skeleton">
  <view class="sk-container">
    <view>
      <view class="uni-margin-wrap">
        <swiper :circular="true" class="swiper" :current="0" :autoplay="false">
          <swiper-item
            style="
              position: absolute;
              width: 100%;
              height: 100%;
              transform: translate(0%, 0px) translateZ(0px);
            "
          >
            <view class="swiper-item">
              <image style="width: 100%; height: 100%" class="sk-image"></image>
            </view>
          </swiper-item>
        </swiper>
        <view class="dot sk-transparent sk-text-14-2857-842 sk-text">1/5</view>
      </view>
      <view class="base_box">
        <view class="price_box sk-transparent">
          ￥
          <text class="text sk-transparent sk-text-30-0000-70 sk-text">166.00</text>
          <text
            style="
              margin-left: 5px;
              text-decoration: line-through transparent;
              color: rgba(255, 255, 255, 0.7);
              font-size: 13px;
            "
            class="sk-transparent sk-text-39-1667-888 sk-text"
            >￥200.00</text
          >
        </view>
        <view class="title_box sk-transparent sk-text-14-2857-889 sk-text"
          >极光限定 珠光蓝珐琅锅</view
        >
        <view class="desc_box"></view>
        <view class="common_box sk-transparent sk-pseudo sk-pseudo-circle">
          <text class="text sk-transparent sk-text-36-0000-767 sk-text">选择</text
          >请选择商品规格</view
        >
        <view class="common_box sk-transparent sk-pseudo sk-pseudo-circle">
          <text class="text sk-transparent sk-text-36-0000-472 sk-text">送至</text
          >请选择收货地址</view
        >
        <view class="common_box sk-transparent sk-pseudo sk-pseudo-circle" style="border-bottom: 0">
          <text class="text sk-transparent sk-text-36-0000-906 sk-text">服务</text>退货运费险
          极速退款 7天无理由退换</view
        >
      </view>
      <view class="detail_box">
        <view
          class="header_box sk-transparent sk-text-36-0000-653 sk-text sk-pseudo sk-pseudo-circle"
          >详情</view
        >
        <view class="common_box">
          <view class="frist sk-transparent sk-text-14-2857-524 sk-text">电压可变</view>
          <view style="flex: 1" class="sk-transparent sk-text-14-2857-273 sk-text">220V</view>
        </view>
        <view class="common_box"></view>
      </view>
      <view is="pages/goodsDetail/components/spec" class="r">
        <view
          is="components/vk-data-goods-sku-popup/vk-data-goods-sku-popup"
          class="r spec--r"
        ></view>
      </view>
      <view is="pages/goodsDetail/components/service" class="r">
        <view
          is="node-modules/@dcloudio/uni-ui/lib/uni-popup/uni-popup"
          class="r service--r"
        ></view>
      </view>
      <view is="pages/goodsDetail/components/addressPopup" class="r">
        <view
          is="node-modules/@dcloudio/uni-ui/lib/uni-popup/uni-popup"
          class="r addressPopup--r"
        ></view>
      </view>
    </view>
  </view>
</template>
<style lang="scss">
.sk-transparent {
  color: transparent !important;
}
.sk-text-14-2857-842 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: absolute !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-30-0000-70 {
  background-image: linear-gradient(
    transparent 30%,
    #eeeeee 0%,
    #eeeeee 70%,
    transparent 0%
  ) !important;
  background-size: 100% 120rpx;
  position: relative !important;
}
.sk-text-39-1667-888 {
  background-image: linear-gradient(
    transparent 39.1667%,
    #eeeeee 0%,
    #eeeeee 60.8333%,
    transparent 0%
  ) !important;
  background-size: 100% 120rpx;
  position: relative !important;
}
.sk-text-14-2857-889 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 44.8rpx;
  position: relative !important;
}
.sk-text-36-0000-767 {
  background-image: linear-gradient(
    transparent 36%,
    #eeeeee 0%,
    #eeeeee 64%,
    transparent 0%
  ) !important;
  background-size: 100% 100rpx;
  position: relative !important;
}
.sk-text-36-0000-472 {
  background-image: linear-gradient(
    transparent 36%,
    #eeeeee 0%,
    #eeeeee 64%,
    transparent 0%
  ) !important;
  background-size: 100% 100rpx;
  position: relative !important;
}
.sk-text-36-0000-906 {
  background-image: linear-gradient(
    transparent 36%,
    #eeeeee 0%,
    #eeeeee 64%,
    transparent 0%
  ) !important;
  background-size: 100% 100rpx;
  position: relative !important;
}
.sk-text-36-0000-653 {
  background-image: linear-gradient(
    transparent 36%,
    #eeeeee 0%,
    #eeeeee 64%,
    transparent 0%
  ) !important;
  background-size: 100% 100rpx;
  position: relative !important;
}
.sk-text-14-2857-524 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-14-2857-273 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
.uni-margin-wrap {
  position: relative;
  width: 100%;
  .swiper {
    height: 700rpx;
  }
  .swiper-item {
    display: block;
    height: 700rpx;
    line-height: 700rpx;
    text-align: center;
  }
  .swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
  }
  .uni-common-mt {
    margin-top: 60rpx;
    position: relative;
  }
  .info {
    position: absolute;
    right: 20rpx;
  }
  .uni-padding-wrap {
    width: 550rpx;
    padding: 0 100rpx;
  }
  .dot {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    display: inline;
    padding: 5rpx 20rpx;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 24rpx;
    color: #fff;
    border-radius: 22rpx;
  }
}
.base_box {
  background-color: #fff;
  margin-bottom: 20rpx;
  .price_box {
    padding-left: 20rpx;
    height: 120rpx;
    line-height: 120rpx;
    background-color: #ff0034;
    color: #fff;
    .text {
      font-size: 48rpx;
    }
  }
  .title_box {
    margin: 20rpx 0;
    padding-left: 20rpx;
    font-size: 32rpx;
  }
  .desc_box {
    padding: 0 0 20rpx 20rpx;
    font-size: 22rpx;
    color: #ff0034;
    border-bottom: 1px solid #eee;
  }
  .common_box {
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    margin-left: 20rpx;
    border-bottom: 1px solid #eee;
    .text {
      color: #999;
      margin: 0 20rpx 0 0;
    }
  }
  .common_box::after {
    font-family: 'iconfont';
    content: '\e629';
    float: right;
    margin-right: 20rpx;
    color: #999;
  }
}
.detail_box {
  margin-bottom: 20rpx;
  background-color: #fff;
  font-size: 28rpx;
  .common_box {
    display: flex;
    padding: 20rpx 20rpx 20rpx 0;
    margin-left: 20rpx;
    border-bottom: 1px dashed #eee;
    .frist {
      width: 230rpx;
    }
  }
  .proudct-item-area {
    margin: 0 10px;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
}
.header_box {
  position: relative;
  background-color: #fff;
  height: 100rpx;
  line-height: 100rpx;
  font-weight: 700;
  padding-left: 30rpx;
  &::after {
    position: absolute;
    top: 50%;
    margin-top: -15rpx;
    left: 20rpx;
    content: '';
    display: inline-block;
    width: 4rpx;
    height: 30rpx;
    background-color: #ff0034;
  }
}
.peer_box {
  font-size: 28rpx;
  .goods_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 20rpx;
    .goods_item {
      position: relative;
      flex: 48%;
      background-color: #fff;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
      padding: 16rpx;
      height: 460rpx;
      font-size: 26rpx;
      .image {
        width: 310rpx;
        height: 310rpx;
      }
      .price_box {
        position: absolute;
        bottom: 10rpx;
        left: 10rpx;
        color: #d14c4c;
      }
    }
    .goods_item:nth-child(odd) {
      margin-right: 10rpx;
    }
    .goods_item:nth-child(even) {
      margin-left: 10rpx;
    }
  }
}
</style>
